<script lang="ts">
import { defineComponent } from "vue";
import { HDataTable, HConditionalSearch } from "@/components";
import { NLayout, NLayoutHeader, NLayoutContent, DialogOptions } from "naive-ui";
import { ruleColumns } from "./ruleColumns";
import { RulesService } from "@/api";
import { Service } from "@/type/service";
import { DialogProps, TableProps } from "@/type";

export default defineComponent({
  components: {
    NLayout,
    NLayoutHeader,
    NLayoutContent,
    HDataTable,
    HConditionalSearch,
  },
  setup() {
    return {
    };
  },
  computed:{
    tableProps():TableProps{
      const columns = ruleColumns();
      return {
        columns:columns,
        title:'规则管理',
        service:RulesService as Service,
      }
    },
    searchProps():DialogProps{
    const newColumns = ruleColumns();
      return{
        columns: newColumns?.filter(c=>!c.hideInSearch),
      }
    }
  }
});
</script>

<template>
  <n-layout>
    <n-layout-header>
      <h-conditional-search v-bind="searchProps" />
    </n-layout-header>
    <n-layout-content>
      <h-data-table v-bind="tableProps"/>
    </n-layout-content>
  </n-layout>
</template>

<style scoped lang="less">
.n-layout{
  background-color: #f6f6f7;
  width: 100%;
  .n-layout-header{
    width: 100%;
  }
}
</style>
